<template>
  <scroller class="page">
    <div class="address" @click="selectAddress">
      <div class="address-detail">
        <text class="address-detail-text">{{ address ? (address + ' ' + postcode + ' ' + name) : '请填写你的收货地址' }}</text>
      </div>
      <div class="address-mobile">
        <text class="address-mobile-text">{{ mobile ? mobile : '请填写你的联系号码' }}</text>
      </div>
    </div>
    <div class="time">
      <text class="time-label">配送时间</text>
      <!-- <text class="time-detail">2019/03/08周一（15:00~17:00）</text> -->
      <div class="popup-select-list">
        <div class="popup-select-item" :class="[selectedTimeIndex === index ? 'popup-select-item-selected' : '']" v-for="(item, index) in times" @click="selectTime(item, index)">
          <text class="popup-select-text" :class="[selectedTimeIndex === index ? 'popup-select-text-selected' : '']">{{ item }}</text>
        </div>
      </div>
    </div>
    <div class="list">
      <div v-for="(item, index) in list">
        <div class="item">
          <image class="item-img" resize="cover" :src="item.cover"></image>
          <div class="item-left">
            <text class="item-title">{{ item.title }}（{{ item.formatTitle }}）</text>
            <text class="item-subtitle">{{ item.subtitle }}</text>
          </div>
          <div class="item-right">
            <text class="item-price">￥{{ item.formatPrice }}</text>
            <text class="item-count">x{{ item.count }}</text>
          </div>
        </div>
      </div>
      <div class="list-count">
        <text class="list-count-text">共 {{ list.length }} 件商品</text>
      </div>
    </div>
    <div class="agreement">
      <div class="agreement-info">
        <text class="agreement-info-text" @click="showWeb">同意《植绘商城用户协议》，已知晓商品详情页提示信息</text>
      </div>
      <div class="agreement-switch">
        <!-- <switch :checked="agreementChecked"></switch> -->
        <wxc-checkbox :checked="agreementChecked" :has-bottom-border="false" @wxcCheckBoxItemChecked="wxcCheckBoxItemChecked"></wxc-checkbox>
      </div>
    </div>
    <Footer />
    <div class="bottom">
      <div class="bottom-left">
        <text class="bottom-left-text-1">应付金额：</text>
        <text class="bottom-left-text-2">￥{{ sum }}</text>
      </div>
      <div class="bottom-right" @click="goPay">
        <text class="bottom-right-text">去支付</text>
      </div>
    </div>
  </scroller>
</template>
<script>
import Footer from '@/components/Footer';
import utils from './utils/utils.js';
import { WxcCheckbox } from 'weex-ui';
const modal = weex.requireModule('modal');
const event = weex.requireModule('event');
const bc = new BroadcastChannel('address');
export default {
  name: 'App',
  components: {
    WxcCheckbox,
    Footer
  },
  data() {
    return {
      list: [],
      isFromCart: false,
      address: '',
      mobile: '',
      name: '',
      postcode: '',
      agreementChecked: false,
      sum: 0,
      times: ['当天下午15:00~17:00（当天16:00前下单选此项）', '次日上午09:00~12:00（当天16:00后下单选此项）', '自提'],
      selectedTimeIndex: ''
    }
  },
  mounted() {
    event.initData(JSON.stringify({'title':'确认订单'}), json => {
      console.log("confirm initData json: " + json);
      var data = JSON.parse(json);
      this.list = data.list;
      this.isFromCart = data.isFromCart;
      this.init();
    })

    // 接收下一个页面返回的数据
    bc.onmessage = event => {
      console.log("event.data.address: " + event.data.address);
      this.address = event.data.address;
      this.mobile = event.data.mobile;
      this.name = event.data.name;
      this.postcode = event.data.postcode;
    }
  },
  methods: {
    init() {
      // var url = '/yq/cart/list';
      // var params = {};
      // var success = res => {
      //   console.log(res);
      //   this.list = res.info;
      // }
      // var fail = res => {
      //   modal.toast({
      //     message: '获取数据失败',
      //     duration: 1
      //   })
      // }
      // utils.request(url, params, success, fail);
    },
    selectAddress() {
      if (!utils.checkToken()) {
          return;
      }
      var params = {
        path: 'address'
      }
      weex.requireModule('event').onPush(JSON.stringify(params));
    },
    selectTime(item, index) {
      this.selectedTimeIndex = index;
    },
    goPay() {
      if (this.selectedTimeIndex === '') {
        modal.toast({
          message: '请选择配送时间',
          duration: 3
        })
        return;
      }
      if (!this.agreementChecked) {
        modal.alert({
          message: '请阅读并同意用户协议',
          okTitle: '确定'
        })
        return;
      }
      var url = '';
      var params = {};
      if (this.isFromCart) {
        url = '/yq/order/payCart';
        params = {
          cart: JSON.stringify(this.list),
          extraInfo: this.times[this.selectedTimeIndex]
        }
      } else {
        url = '/yq/order/pay';
        params = {
          productId: this.list[0].productId,
          formatId: this.list[0].formatId,
          count: this.list[0].count,
          extraInfo: this.times[this.selectedTimeIndex]
        }
      }
      var success = res => {
        // TODO 支付成功
      }
      var fail = res => {
        modal.toast({
          message: '提交失败',
          duration: 1
        })
      }
      // utils.request(url, params, success, fail);
    },
    showWeb() {
      event.showWeb('http://www.zhen-yee.com', function () {});
    },
    wxcCheckBoxItemChecked(e) {
      this.agreementChecked = e.checked;
    }
  }
}
</script>
<style scoped>
text {
  font-size: 32px;
}

.page {
  padding-bottom: 150px;
}

.address {
  padding: 30px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #527a5f;
}

.address-detail {
  padding-bottom: 20px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #888;
}

.address-mobile {
  padding-top: 20px;
}

.address-detail-text,
.address-mobile-text {
  font-size: 28px;
}

.time {
  padding: 30px;
  flex-direction: column;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #eee;
}

.time-label {
  font-size: 28px;
  margin-bottom: 30px;
}

.time-detail {
  font-size: 26px;
  font-weight: bold;
  color: #527a5f;
}

.popup-select-title {
  padding-left: 30px;
  font-weight: bold;
}

.popup-select-list {
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 30px;
}

.popup-select-item {
  background-color: #f5f5f5;
  padding: 10px 30px;
  margin-right: 30px;
  margin-bottom: 30px;
}

.popup-select-item-selected {
  background-color: #595758;
}

.popup-select-text {
  font-size: 24px;
  color: #595758;
}

.popup-select-text-selected {
  color: #fff;
}

.list {
}

.item {
  padding: 30px;
  flex-direction: row;
}

.item-img {
  width: 120px;
  height: 120px;
}

.item-left {
  width: 420px;
  padding: 0 30px;
}

.item-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
}

.item-subtitle {
  font-size: 24px;
  color: #888;
}

.item-right {
  width: 150px;
  align-items: flex-end;
}

.item-price {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.item-count {
  font-size: 24px;
  color: #888;
}

.list-count {
  padding: 30px;
  flex-direction: row;
  justify-content: flex-end;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #eee;
}

.list-count-text {
  font-weight: bold;
}

.agreement {
  flex-direction: row;
  align-items: center;
  padding: 30px;
  border-top-width: 10px;
  border-top-style: solid;
  border-top-color: #eee;
  border-bottom-width: 10px;
  border-bottom-style: solid;
  border-bottom-color: #eee;
}

.agreement-info {
  width: 570px;
}

.agreement-info-text {
  font-size: 26px;
}

.agreement-switch {
  width: 120px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #aaa;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  height: 110px;
}

.bottom-left {
  width: 400px;
  flex-direction: row;
  align-items: center;
  padding: 0 30px;
}

.bottom-left-text-1 {
  font-size: 28px;
}

.bottom-left-text-2 {
  color: #527a5f;
  font-weight: bold;
}

.bottom-right {
  width: 350px;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #527a5f;
}

.bottom-right-text {
  font-size: 34px;
  color: #fff;
}
</style>